<template>
  <bbx-timezone-time-picker
    :field="field"
    :value="value"
    :is-edit="true"
    :type="dateType"
    value-format="timestamp"
    @confirm="choose"
  >
    <template picker>
      <el-date-picker
        :value="value"
        @input="choose"
        :type="dateType"
        align="right"
        unlink-panels
        range-separator="-"
        :start-placeholder="$t('common.form.placeHolder.date.pla2')"
        :end-placeholder="$t('common.form.placeHolder.date.pla3')"
        :default-time="field.defaultTime ? field.defaultTime : ['00:00:00', '23:59:59']"
        :picker-options="(pickerOptions.shortcuts || needValidate)? pickerOptions : datePickerOptions"
        :clearable="clearable"
        value-format="timestamp"
      />
    </template>
  </bbx-timezone-time-picker>
</template>

<script>
import BbxTimezoneTimePicker from '@src/component/Bbx/TimezoneTimePicker'
import FormMixin from '@src/component/form/mixin/form';
import { useDatePicker } from 'pub-bbx-utils'
import { t } from '@src/locales'

export default {
  name: 'DateSearch',
  components: {
    BbxTimezoneTimePicker,
  },
  mixins: [FormMixin],
  props: {
    value: {
      type: Array,
      default: () => []
    },
    pickerOptions: {
      type: Object,
      default: () => ({})
    },
    clearable: {
      type: Boolean,
      default: true
    },
    needValidate: {
      type: Boolean,
      default: true
    },
  },
  data() {
    const { nearDate } = useDatePicker()
    
    return {
      datePickerOptions: {
        shortcuts: [
          nearDate(t('common.form.placeHolder.date.pla4'), 1, 'week'),
          nearDate(t('common.form.placeHolder.date.pla5'), 1, 'month'),
          nearDate(t('common.form.placeHolder.date.pla6'), 3, 'month'),
        ]
      }
    };
  },
  computed: {
    dateType() {
      return this.field?.setting?.customizedTimeType ?? 'daterange'
    }
  },
  methods: {
    choose(newValue) {
      this.$emit('update', { newValue, oldValue: this.value, field: this.field });
    }
  }
};
</script>

<style lang="scss">
.el-date-editor {
  width: 100% !important;
}
</style>
